import React from 'react';
import { Handle, Position } from '@xyflow/react';
import { Box, Typography, IconButton } from '@mui/material';
import { PlayCircle as PlayCircleIcon } from '@mui/icons-material';
import { CustomNode, NodeData } from './NodeTypes';

interface CustomNodeProps {
  id: string;
  data: NodeData;
  selected: boolean;
}

const CustomNodeComponent: React.FC<CustomNodeProps> = ({ id, data, selected }) => {
  // 判断是否是数据读取模块的节点
  const isDataInputNode = data.type.startsWith('data_input') ||
    data.type === 'csv_reader' ||
    data.type === 'excel_reader' ||
    data.type === 'db_reader';

  // 判断是否是结构化视图节点
  const isStructuredViewNode = data.type === 'structured_view';
  
  // 根据节点类型决定颜色
  const getNodeColor = () => {
    const category = data.type.split('_')[0];
    switch (category) {
      case 'data': return '#4caf50';
      case 'csv':
      case 'excel':
      case 'db': return '#2196f3';
      case 'random':
      case 'logistic':
      case 'svm': return '#9c27b0';
      case 'structured': return '#ff9800';
      default: return '#607d8b';
    }
  };
  
  const borderColor = getNodeColor();
  const bgColor = selected ? `${borderColor}22` : '#fff';

  return (
    <Box
      sx={{
        padding: 1.5,
        borderRadius: 2,
        background: bgColor,
        minWidth: 150,
        textAlign: 'center',
        fontSize: '14px',
        color: '#333',
        border: `2px solid ${borderColor}`,
        boxShadow: selected
          ? `0 0 10px ${borderColor}66`
          : '0 2px 8px rgba(0,0,0,0.1)',
        transition: 'all 0.3s ease',
        '&:hover': {
          boxShadow: `0 0 15px ${borderColor}44`,
          transform: 'translateY(-2px)',
        },
        position: 'relative',
      }}
    >
      {/* 节点标题 */}
      <Typography
        component="div"
        sx={{
          fontWeight: 600,
          mb: 0.5,
          color: '#333',
          whiteSpace: 'nowrap',
          overflow: 'hidden',
          textOverflow: 'ellipsis',
        }}
      >
        {data.label}
      </Typography>
      
      {/* 节点类型标签 */}
      <Typography
        variant="caption"
        component="div"
        sx={{
          opacity: 0.7,
          mb: 1,
          fontSize: '0.7rem',
        }}
      >
        {data.type.replace(/_/g, ' ')}
      </Typography>
      
      {/* 执行图标 */}
      <IconButton
        size="small"
        sx={{
          position: 'absolute',
          top: -12,
          right: -12,
          backgroundColor: '#fff',
          border: `1px solid ${borderColor}`,
          '&:hover': {
            backgroundColor: '#f0f0f0',
            transform: 'scale(1.1)',
          },
          transition: 'all 0.2s ease',
          boxShadow: '0 2px 5px rgba(0,0,0,0.1)',
        }}
        onClick={(e) => {
          e.stopPropagation();
          // 触发节点执行
          const event = new CustomEvent('execute-node', { detail: { nodeId: id } });
          window.dispatchEvent(event);
        }}
      >
        <PlayCircleIcon fontSize="small" color="primary" />
      </IconButton>

      {/* 只有非数据读取节点才显示输入 Handle */}
      {!isDataInputNode && (
        <Handle
          type="target"
          position={Position.Top}
          style={{
            background: borderColor,
            width: '10px',
            height: '10px',
            border: '2px solid #fff',
          }}
        />
      )}

      {/* 所有节点都显示输出 Handle */}
      <Handle
        type="source"
        position={Position.Bottom}
        style={{
          background: borderColor,
          width: '10px',
          height: '10px',
          border: '2px solid #fff',
        }}
      />
    </Box>
  );
};

export default CustomNodeComponent; 